<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Episodes 1</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" class="ref">
</head>

<body>
    <div class="container">
        <div id="tasks">

            <div v-if="remaining.length">
                <h1>Tasks ({{ remaining.length }})</h1>
                <ol class="list-group">
                    <li v-for="task in tasks | inProcess"
                        class="list-group-item"
                    >
                        <span v-on:dblclick="editTask(task)">{{ task.body }}</span>

                        <button v-on:click="removeTask(task)">&#10007;</button>
                        <button v-on:click="toggleTaskCompletion(task)">&#10004</button>
                    </li>
                </ol>
            </div>

            <form v-on:submit="addTask">
                <div class="form-group">
                    <input 
                    v-model="newTask"
                    v-el="newTask"
                    class="form-control" 
                    placeholder="I need to...">
                </div>

                <button class="btn btn-primary">Add Task</button>
                <button class="btn btn-default" 
                        v-on:click="completeAll()"
                >
                    Mark Al As Completed
                </button>
            </form>

            <div v-if="completions.length">
                <h2>Completed ({{ completions.length }})</h2>
                <ol class="list-group">
                    <li v-for="task in tasks | filterBy true in 'completed'"
                        class="list-group-item"
                    >
                        {{ task.body }}

                        <button v-on:click="toggleTaskCompletion(task)">&#10007;</button>
                    </li>
                </ol>
                <button class="btn btn-danger"
                        v-on:click="clearCompleted"
                >
                    Clear Completed
                </button>
            </div>

        </div>
    </div>
    <script src="app.js"></script>
</body>

</html>